<template>
  <div class="AuxiliaryModel-box">
    <t-dialog
      placement="center"
      v-model:visible="store.auxiliaryShow"
      header="编辑辅助信息"
      width="960px"
      :on-cancel="onCancel"
      :on-esc-keydown="onEscKeydown"
      :on-close-btn-click="onCloseBtnClick"
      :on-overlay-click="onOverlayClick"
      :on-close="close"
      :on-confirm="onConfirmAnother"
    >
      <div class="AuxiliaryModel-content">
        <AuxiliaryComponent ref="AuxiliaryRef" :id="Auxiliaryid" />
      </div>
      <template #footer>
        <div class="footer-box">
          <t-button @click="close" variant="outline">取消</t-button>
          <t-button @click="onConfirmAnother" :loading="loading">确定</t-button>
        </div>
      </template>
    </t-dialog>
  </div>
</template> 
<script setup lang="ts">
import { moduleSave } from '@/api/desgin/desgin';
import AuxiliaryComponent from './auxiliaryComponent.vue';
import { nextTick, ref, watch } from 'vue';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
import { MessagePlugin } from 'tdesign-vue-next';
const Auxiliaryid = ref(0);
const AuxiliaryRef = ref();
const store = useProjectStore();
const { auxiliaryShow } = storeToRefs(store);
const current = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const onConfirmAnother = async (context) => {
  //   visible.value = false;

  let data = AuxiliaryRef.value.exportData();
  if (!data.name) {
    MessagePlugin.warning('请设置标题');
    return;
  }
  store.sbmitAuxiliaryItem(data);
  store.setauxiliaryShow(false);
  let res = await moduleSave(localStorage.getItem('projectId'), data);
  // console.log(data)
};

const close = (context) => {
  //   console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
  store.setauxiliaryShow(false);
};
const onCancel = (context) => {
  //   console.log('点击了取消按钮', context);
  // store.setMaterialsReplaceShow(false)
};
const onEscKeydown = (context) => {
  //   console.log('按下了ESC', context);
  // store.setMaterialsReplaceShow(false)
};
const onCloseBtnClick = (context) => {
  //   console.log('点击了关闭按钮', context);
  // store.setMaterialsReplaceShow(false)
};
const onOverlayClick = (context) => {
  //   console.log('点击了蒙层', context);
};
watch(
  () => auxiliaryShow,
  () => {
    let { id } = store.itemList;

    Auxiliaryid.value = id;
    console.log(Auxiliaryid.value, '获取id');
    AuxiliaryRef.value.init(Auxiliaryid.value);
  },
  { deep: true },
); 
</script> 

<style scoped lang="less">
.AuxiliaryModel-content {
  width: 100%;
  height: 63vh;
  overflow: auto;
  scrollbar-width: none;
}
:deep(.t-dialog__body) {
  padding: 0 24px;
}
.footer-box {
  display: flex;
  justify-content: center;
  :deep(.t-button--theme-primary) {
    width: 184px;
    height: 40px;
    border-radius: 4px;
  }
  :deep(.t-button--theme-default) {
    width: 68px;
    height: 40px;
    border-radius: 4px;
  }
}
:deep(.t-dialog__header) {
  box-shadow: none;
}
</style>